<template>
	<view>
		<u-navbar :is-back="true" title="">
			<view slot="right">
				<text class="create-btn">创建群聊</text>
			</view>
		</u-navbar>
		<view class="create-box">
			<view class="create-cell-list u-flex">
				<text class="create-title">群名:</text>
				<input type="text" placeholder="请输入群名" class="create-input" />
			</view>
			<view class="create-cell-list u-flex">
				<text class="create-title">头像：</text>
				<image src="../../../static/img/chat/tianjiatouxiang.png" class="tianjiatoux"></image>
			</view>
		</view>
		<view class="sousuojieguo">
			<view class="ssjg-top">添加群成员</view>
			<view class="haoyou-sousuo u-flex">
				<image src="../../../static/img/sousuo.png" class="sousuo-icon"></image>
				<input type="text" placeholder="" class="sousuo-input" />
				<text class="sousuo-btn">搜索</text>
			</view>
		</view>
		<view class="sousuojieguo">
			<view class="ssjg-list">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<text class="user-name">小李1546</text>
				<text class="tianjiahaoyou">添加到群</text>
			</view>
		</view>
		<view class="sousuojieguo">
			<view class="ssjg-list">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<text class="user-name">小李1546</text>
				<text class="tianjiahaoyou">添加到群</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ebebeb;
}
.create-btn{
	margin-right: 30rpx;
	color: #515151;
	font-size: 30rpx;
}
.create-box{
	background-color: #FFFFFF;
	margin-top: 8rpx;
	.create-cell-list{
		padding: 35rpx 45rpx;
		border-bottom: 1px solid #ebebeb;
		.create-title{
			width: 195rpx;
			font-size: 30rpx;
		}
		.create-input{
			font-size: 28rpx;
		}
		.tianjiatoux{
			width: 48rpx;
			height: 48rpx;
		}
	}
}
.haoyou-sousuo{
	padding: 15rpx 55rpx;
	background-color: #FFFFFF;
	margin-top: 8rpx;
	.sousuo-icon{
		width: 28rpx;
		height: 28rpx;
	}
	.sousuo-input{
		height: 70rpx;
		line-height: 70rpx;
		border-right: 1px solid #ebebeb;
		flex: 1;
		padding-left: 15rpx;
	}
	.sousuo-btn{
		font-size: 28rpx;
		padding-left: 35rpx;
	}
}
.sousuo-item{
	margin: 15rpx 0;
	padding: 25px 0;
	background-color: #FFFFFF;
	.sousuo-item-list{
		display: flex;
		align-items: center;
		padding: 40rpx 65rpx;
		.list-icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 25rpx;
		}
		.list-text{
			font-size: 28rpx;
		}
	}
}
.sousuojieguo{
	background-color: #FFFFFF;
	margin-top: 15rpx;
	.ssjg-top{
		text-align: center;
		font-size: 30rpx;
		padding: 30rpx 0 25rpx;
		border-bottom: 1px solid #ebebeb;
	}
	.ssjg-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 60rpx;
		.user-tx{
			width: 72rpx;
			height: 72rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.user-name{
			font-size: 28rpx;
			flex: 1;
		}
		.tianjiahaoyou{
			color: #2ea34a;
			font-size: 24rpx;
		}
	}
}
</style>
